<template>
  <div>
    <div class="table margin-top padding-bottom">
      <div class="list" v-for="l in data" :key='l.id'>
		  <img src="../../../assets/img/pen2.png" alt="">
    	  <p>套餐内容：每天能主动与<input type="text" v-model="l.chat">个用户聊天
		   <br>
		   价格：<input type="text" v-model="l.price">金币
		   <br>
		   <a @click="che1(l.id)">修改</a></p>
		  <h1>{{l.name}}</h1>
      </div>
    </div>
  </div>
</template>

<script>
import { setlist,updatelist } from '@/api/api'
export default {
  data() {
    return {
    	data:[]
    }
  },
  created() {
	  setlist({type:2}).then(data => {
	  			  if(data.code == 200){
	  				  this.data=data.data
	  			  }
	  })
  },
  methods: {
	  che1(id){
	  		var deft;
	  		for(var i=0;i<this.data.length;i++){
	  					 if(id==this.data[i].id){
	  						 deft=this.data[i]
	  					 }
	  					
	  		}
	  		updatelist(deft).then(data => {
	  					  if(data.code == 200){
	  						   Is.tip('编辑成功', 2000, 'success')
	  					  }
	  		})
	  }
  }}
</script>

<style lang="scss" scoped>
.list{
	margin-top: 35px;
	img{
		display: inline-block;
		width: 120px;
		height: 120px;
		vertical-align: top;
		border: 1px solid #ddd;
	}
		h1{
			font-size: 18px;
			color: #333;
			width: 120px;
			text-align: center;
		}
		p{
			display: inline-block;
			vertical-align: top;
			font-size: 16px;
			color: #333;
			margin: 0;
			margin-left: 25px;
			input{
				width: 40px;
				height: 40px;
				font-size: 16px;
				color: #333;
				outline: none;
				text-align: center;
				margin-left: 8px;
				margin-right: 8px;
			}
			a{
				display: inline-block;
				width: 50px;
				height: 40px;
				    color: #333;
					border: 1px solid #ddd;
				    background-color: #fff;
				    border-color: #ddd;
					text-align: center;
					vertical-align: middle;
					line-height: 40px;
					margin-right: 15px;
					margin-top: 15px;
					border-radius: 10px;
			}
		}
	}
</style>
